<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>区域分组</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center">
      <el-card>
        <el-row>
          <el-button
            style="background-color:#fd804c;color: #fff;"
            @click="addGoodsAreaHandle"
            >新增区域</el-button
          >
        </el-row>

        <el-row style="margin-top: 20px">
          <el-table
            :show-header="true"
            :data="areaList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="areaCode"
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column prop="areaName" label="分组名称">
            </el-table-column>
            <el-table-column label="服务商品数量">
              <template slot-scope="scope">
                <span v-if="scope.row.parentAreaCode !== null">
                  {{
                    scope.row.serviceGoodsNum === null
                      ? 0
                      : scope.row.serviceGoodsNum
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="前端显示">
              <template slot-scope="scope">
                <el-switch
                  @change="isShowHandle($event, scope.row.areaCode)"
                  v-model="scope.row.isShow"
                  active-color="#fb8053"
                  inactive-color="#dcdfe6"
                >
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  style="color: #fc9e76;"
                  type="text"
                  size="small"
                  @click="editGoodsAreaHandle(scope.row.areaCode)"
                  >编辑</el-button
                >
                <el-button
                  style="color: #fc9e76;"
                  size="small"
                  type="text"
                  @click="deleteGoodsAreaHandle(scope.row.areaCode)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>

      <add-goods-area
        v-if="addGoodsAreaVisible"
        ref="addGoodsArea"
        @func="getAreaList"
      ></add-goods-area>
      <edit-goods-area
        v-if="editGoodsAreaVisible"
        ref="editGoodsArea"
        @func="getAreaList"
      ></edit-goods-area>
    </div>
  </div>
</template>

<script>
import AddGoodsArea from "./add-goods-area";
import EditGoodsArea from "./edit-goods-area";

export default {
  components: { AddGoodsArea, EditGoodsArea },
  data() {
    return {
      addGoodsAreaVisible: false,
      editGoodsAreaVisible: false,
      areaList: []
    };
  },
  methods: {
    addGoodsAreaHandle() {
      this.addGoodsAreaVisible = true;
      this.$nextTick(() => {
        this.$refs.addGoodsArea.init();
      });
    },
    editGoodsAreaHandle(areaCode) {
      this.editGoodsAreaVisible = true;
      this.$nextTick(() => {
        this.$refs.editGoodsArea.init(areaCode);
      });
    },

    deleteGoodsAreaHandle(areaCode) {
      this.$confirm("确定删除选中区域分组", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http
          .get(
            `hssgoodsadmin/serviceAreaInfo/deleteGoodsArea?areaCode=${areaCode}`
          )
          .then(({ success, errorMsg }) => {
            if (success) {
              this.getAreaList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: errorMsg
              });
            }
          });
      });
    },
    isShowHandle(event, areaCode) {
      this.$http.get(
        `hssgoodsadmin/serviceAreaInfo/isShowArea?areaCode=${areaCode}&isShow=${event}`
      );
    },
    async getAreaList() {
      const { data } = await this.$http.get(
        "hssgoodsadmin/serviceAreaInfo/getServiceAreaInfoList"
      );
      this.areaList = data;
    }
  },
  created() {
    this.getAreaList();
  }
};
</script>

<style scoped>
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
</style>
